<template>
  <div class="chart-container">
    <div
      ref="chartRef"
      class="chart"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
import { Column } from "@antv/g2plot";

// 响应式数据
const data = ref([
  {
    type: "家具家电",
    sales: 38,
  },
  {
    type: "粮油副食",
    sales: 52,
  },
  {
    type: "生鲜水果",
    sales: 61,
  },
  {
    type: "美容洗护",
    sales: 145,
  },
  {
    type: "母婴用品",
    sales: 48,
  },
  {
    type: "进口食品",
    sales: 38,
  },
  {
    type: "食品饮料",
    sales: 38,
  },
  {
    type: "家庭清洁",
    sales: 38,
  },
]);

const chartRef = ref(null);
const columnPlot = ref(null);

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  // 销毁已存在的图表实例
  if (columnPlot.value) {
    columnPlot.value.destroy();
  }

  columnPlot.value = new Column(chartRef.value, {
    title: {
      visible: true,
      text: "商品销售额统计",
      style: {
        fontSize: 16,
        fontWeight: "bold",
        color: "#333",
      },
    },
    description: {
      visible: true,
      text: "各商品类别销售额对比",
      style: {
        fontSize: 12,
        color: "#666",
      },
    },
    forceFit: true,
    data: data.value,
    padding: [40, 30, 50, 80], // 上、右、下、左
    xField: "type",
    yField: "sales",
    meta: {
      type: {
        alias: "商品类别",
      },
      sales: {
        alias: "销售额",
        formatter: (value) => `${value} 万`,
      },
    },
    // xAxis: {
    //   label: {
    //     autoRotate: false,
    //     style: {
    //       fontSize: 12,
    //     },
    //     formatter: (text) => {
    //       // 文本过长时显示省略号
    //       return text.length > 4 ? `${text.substring(0, 4)}...` : text;
    //     },
    //   },
    // },
    // yAxis: {
    //   label: {
    //     style: {
    //       fontSize: 12,
    //     },
    //     formatter: (value) => `${value} 万`,
    //   },
    //   grid: {
    //     line: {
    //       style: {
    //         stroke: "#f0f0f0",
    //         lineDash: [4, 4],
    //       },
    //     },
    //   },
    // },
    // color: ({ type }) => {
    //   // 根据销售额设置不同颜色
    //   const item = data.value.find((d) => d.type === type);
    //   if (item.sales > 100) return "#ff4d4f";
    //   if (item.sales > 60) return "#faad14";
    //   if (item.sales > 50) return "#52c41a";
    //   return "#1890ff";
    // },
    columnStyle: {
      cursor: "pointer",
    },
    // tooltip: {
    //   showTitle: true,
    //   title: "商品类别",
    //   showMarkers: false,
    //   fields: ["type", "sales"],
    //   formatter: (datum) => {
    //     return {
    //       name: datum.type,
    //       value: `${datum.sales} 万元`,
    //     };
    //   },
    //   customContent: (title, items) => {
    //     const item = items[0];
    //     return `
    //       <div class="custom-tooltip">
    //         <div class="tooltip-title">${title}</div>
    //         <div class="tooltip-content">
    //           <span class="tooltip-marker" style="background: ${item?.color}"></span>
    //           <span>${item?.name}: </span>
    //           <span class="tooltip-value">${item?.value}</span>
    //         </div>
    //       </div>
    //     `;
    //   },
    //   domStyles: {
    //     "g2-tooltip": {
    //       background: "rgba(255, 255, 255, 0.95)",
    //       borderRadius: "6px",
    //       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
    //       border: "1px solid #e8e8e8",
    //       padding: "12px",
    //     },
    //     "g2-tooltip-title": {
    //       fontSize: "14px",
    //       fontWeight: "bold",
    //       color: "#333",
    //       marginBottom: "8px",
    //       borderBottom: "1px solid #f0f0f0",
    //       paddingBottom: "6px",
    //     },
    //     "g2-tooltip-list-item": {
    //       fontSize: "13px",
    //       color: "#666",
    //       marginBottom: "4px",
    //     },
    //     "g2-tooltip-list-item-name": {
    //       fontWeight: "bold",
    //     },
    //     "g2-tooltip-list-item-value": {
    //       color: "#1890ff",
    //       fontWeight: "bold",
    //     },
    //   },
    // },
    // interactions: [{ type: "element-active" }, { type: "element-highlight" }],
    // animation: {
    //   appear: {
    //     animation: "scale-in-y",
    //     duration: 1000,
    //   },
    //   update: {
    //     animation: "scale-in-y",
    //     duration: 1000,
    //   },
    // },
    // state: {
    //   active: {
    //     style: {
    //       fill: "#ff4d4f",
    //       stroke: "#000",
    //       strokeWidth: 1,
    //     },
    //   },
    // },
  });

  // 添加点击事件
  // columnPlot.value.on("element:click", (event) => {
  //   const data = event.data?.data;
  //   if (data) {
  //     console.log("点击了:", data);
  //     // 可以在这里触发自定义事件
  //     // emit('chartClick', data);
  //   }
  // });

  columnPlot.value.render();
};

// 响应式调整图表大小
// const resizeChart = () => {
//   if (columnPlot.value) {
//     columnPlot.value.changeSize(
//       chartRef.value?.clientWidth || 400,
//       chartRef.value?.clientHeight || 400
//     );
//   }
// };

// 监听数据变化
watch(
  data,
  (newData) => {
    if (columnPlot.value) {
      columnPlot.value.changeData(newData);
    }
  },
  { deep: true }
);

let resizeObserver = null;

onMounted(() => {
  nextTick(() => {
    initChart();

    // 使用 ResizeObserver 监听容器大小变化
    if (chartRef.value) {
      resizeObserver = new ResizeObserver(() => {
        // resizeChart();
      });
      resizeObserver.observe(chartRef.value);
    }

    // // 监听窗口大小变化
    // window.addEventListener("resize", resizeChart);
  });
});

onBeforeUnmount(() => {
  // 清理工作
  if (resizeObserver) {
    resizeObserver.disconnect();
    resizeObserver = null;
  }

  // window.removeEventListener("resize", resizeChart);

  if (columnPlot.value) {
    columnPlot.value.destroy();
    columnPlot.value = null;
  }
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-container {
    height: 350px;
  }
}

@media (max-width: 480px) {
  .chart-container {
    height: 300px;
  }
}
</style>

<style>
/* 全局 tooltip 样式 */
.custom-tooltip {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tooltip-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.tooltip-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.tooltip-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.tooltip-value {
  color: #1890ff;
  font-weight: bold;
}
</style>
